<template>
	<view class="content">
		<view class="info">
			<view class="info1">
				<text>城市</text>
				<input
					type="text"
					v-model="dizhi.address"
					value=""
					placeholder="请输入城市地区"
					placeholder-class="inputStyle"
					@click="getMap"
				/>
			</view>
			<view class="info2">
				<text>店名</text>
				<input
					type="text"
					v-model="name"
					value=""
					placeholder="请输入店铺名称"
				/>
			</view>
			<view class="info3">
				<text>姓名</text>
				<input
					type="text"
					v-model="username"
					value=""
					placeholder="请输入姓名"
				/>
			</view>
			<!--  -->
			
			 <view class="info4">
			   <text>微信号</text>
			   <input
			     type="text"
			     value=""
			     v-model="wx_num"
			     placeholder="请输入微信号"
			   />
			 </view> <view class="info4">
			   <text>支付宝账号</text>
			   <input
			     type="text"
			     value=""
			     v-model="alipay_num"
			     placeholder="请输入支付宝账号"
			   />
			 </view> <view class="info4">
			   <text>银行卡号</text>
			   <input
			     type="number"
			     value=""
			     v-model="bank_num"
			     placeholder="请输入银行卡号"
			   />
			 </view>
			<!--  -->
			<view class="info4">
				<text>手机号</text>
				<input
					type="number"
					v-model="phone"
					value=""
					placeholder="请输入手机号"
				/>
			</view>
			<view class="info5">
				<text>店铺分类</text>
				<u-select
					v-model="show"
					:list="list"
					@confirm="confirm"
				></u-select>
				<input
					type="text"
					v-model="classification"
					placeholder="请选择分类"
					@click="show = true"
					disabled
				/>
			</view>
		</view>
		<view class="applyToSettleIn">
			<button type="default" @click="shengqing()">申请入驻</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
		
			wx_num: "", //微信号
			alipay_num: "",//支付宝账号
			bank_num: "",//银行卡号
			uid: '', //用户id
			fl_id: '', //分类id
			name: '', //店名
			username: '', //联系人
			phone: '', //联系电话
			site: '', //城市地区
			list: [],
			classification: '',
			dizhi: {}
		};
	},
	methods: {
		//获取地理位置
		getMap() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					var dizhi = {
						name: res.name,
						address: res.address,
						latitude: res.latitude,
						longitude: res.longitude
					};
					try {
						uni.setStorageSync('dizhi', dizhi);
					} catch (e) {
						// error
					}
				}
			});
		},
		// 提交
		confirm(e) {
			console.log('e :>> ', e);
			this.classification = e[0].label;
		},
		// 申请店铺
		shengqing() {
			console.log('this.dizhi.longitude :>> ', this.dizhi.longitude);
			this.$u
				.post('api/shop/shop_user', {
					uid: this.uid,
					fl_id: this.fl_id,
					name: this.name,
					username: this.username,
					phone: this.phone,
					site: this.dizhi.address,
					longitude: this.dizhi.longitude,
					latitude: this.dizhi.latitude,
					wx_num: this.wx_num,
					alipay_num: this.alipay_num,
					bank_num: this.bank_num,
					
					
				})
				.then(res => {
					console.log(res);
					if (res.msg === "已存在商户，请等待审核") {
						uni.$showMsg(res.msg);
						uni.navigateTo({
							url: '../../index/index'
						});
					} else {
						uni.$showMsg(res.msg);
					}
				});
		},
		// 获取分类
		getClassification() {
			this.$u.post('api/shop/shop_type').then(res => {
				console.log('res111111111 :>> ', res);
				this.list = res.data;
				this.fl_id = res.data[0].value;
			});
		}
	},
	onLoad() {
		this.dizhi.address = '';
		this.getClassification();
		try {
			const value = uni.getStorageSync('uid');
			if (value) {
				this.uid = value;
				console.log('3333>> ', this.uid);
			}
		} catch (e) {
			// error
		}
	},
	onShow() {
		try {
			const value = uni.getStorageSync('dizhi');
			if (value) {
				this.dizhi = value;
				console.log('this.dizhi :>> ', this.dizhi);
			}
		} catch (e) {
			// error
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;

	.info {
		width: 690rpx;
		//height: 689rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 0 31rpx;

		.info1,
		.info2,
		.info3,
		.info4,
		.info5 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 131rpx;
			margin-left: 29rpx;
			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.applyToSettleIn {
		button {
			margin-top: 190rpx;
			width: 690rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #ffa73d, #ffdd65);
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
